<template>
	<view class="ballbar-list">
		<view class="ballbar flex-r ac" v-for="(bar, index) in list" :key="index" @tap="$CHS.goBarHome(bar.id, bar.blacklist)">
			<!-- 球吧logo -->
			<lazy-image class="bar-avatar border-round" :src="bar.logo+'?imageView2/1/w/100/h/100/q/50'" type="bar" fit="cover"></lazy-image>
			<!-- 球吧信息 -->
			<view class="bar-info flex-c color-grey">
				<view class="flex-r ac">
					<text class="text-regular color-black mr20">{{bar.title}}</text>
					<image class="icon" src="@/public/images/bar/fs.png" mode="widthFix"></image>
					<text class="text-mini mr20">{{bar.num}}</text>
					<image class="icon" src="@/public/images/bar/zxfb.png" mode="widthFix"></image>
					<text class="text-mini">{{bar.latestReleaseNum}}</text>
				</view>
				<view class="text-info mt20 text-hidden" v-if="bar.intro">{{bar.intro}}</view>
			</view>
			<!-- 关注按钮 -->
			<button class="favbtn flex-r ac jc" type="default" @tap.stop="followBar(bar)" v-if="bar.followStatus != 1">
				<image src="@/public/images/bar/jgz.png" mode="aspectFit"></image>
				<text>关注</text>
			</button>
		</view>
	</view>
</template>

<script>
	/**
	 * BallbarList 球吧列表
	 * @description 更多球吧、球吧搜索结果列表
	 * @property {Array} list 球吧列表数据
	 * @example <BallbarList :list="list"></BallbarList>
	 */
	export default {
		name: "BallbarList",
		props: {
			list: {
				type: [Array, Object],
				default: ()=>{
					return []
				}
			}
		},
		methods: {
			//关注球吧
			followBar(bar) {
				if(bar.followStatus == 1 || this.isFaving == bar.id){
					return false
				}
				this.isFaving = bar.id
				this.$http.post({
					url: '/api/forum/user/follow',
					data: {
						id: bar.id,
						status: 1
					}
				}).then((data)=>{
					if(data.success){
						this.$ShowToast({text: '已关注',	type: 1})
						this.$set(bar, 'followStatus', 1)
					}else{
						uni.showToast({
							title: data.message || '关注失败，请稍后重试',
							icon: 'none'
						})
					}
				}).catch((err) => {
					console.log(err);
				}).finally(()=>{
					this.isFaving = null
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.ballbar-list{
		background-color: #fff;
		.ballbar{
			width: 100%;
			height: 120rpx;
			padding: 0 20rpx;
			box-sizing: border-box;
			border-bottom: 1rpx solid #ededed;
			.bar-avatar{
				margin-right: 20rpx;
				width: 88rpx;
				height: 88rpx;
			}
			.bar-info{
				flex: 2;
				.text-regular{
					font-weight: 500;
				}
				.mr20{
					margin-right: 20rpx;
				}
				.icon{
					margin-right: 10rpx;
					width: 24rpx;
				}
				.text-hidden{
					max-width: 430rpx;
					line-height: 1.2;
				}
			}
			.favbtn{
				height: 60rpx;
				background: #E5EEFF;
				border-radius: 30rpx;
				font-size: 24rpx;
				color: #0055FF;
				padding: 0 23rpx;
				margin: 0;
				image{
					margin-right: 3rpx;
					width: 24rpx;
					height: 24rpx;
				}
			}
		}
		.ballbar:last-child{
			border: none;
		}
	}
</style>